<template>
  <UserTable
    :column-selected="[
      'index',
      'userId',
      'userName',
      'nickName',
      'email',
      'phoneNumber',
      'statusName',
      'createTime',
      'action'
    ]"
    :data-source="sourceData"
    :loading="spinning"
    :row-selection="{
      selectedRowKeys,
      getCheckboxProps: ({ admin }) => ({ disabled: admin }),
      onChange: setSelectedRowKeys
    }"
    :pagination="{
      current: pagination.pageNum,
      pageSize: pagination.pageSize,
      total: pagination.total,
      onChange: onPageChange
    }"
    @search="onSearchData"
  >
    <template #searchCollapse>
      <UserSearchFrom @finish="onSearchData" @reset="onResetData"></UserSearchFrom>
    </template>

    <template #operateLeft>
      <AButton type="primary" ghost :icon="createVNode(PlusOutlined)" @click="() => setOpenAddModal(true)">
        添加
      </AButton>
      <APopconfirm
        title="您确定批量删除数据吗?"
        ok-text="是"
        cancel-text="否"
        @confirm="() => onDelete(selectedRowKeys)"
      >
        <AButton danger ghost :icon="createVNode(DeleteOutlined)" :disabled="!selectedRowKeys.length">删除</AButton>
      </APopconfirm>
    </template>

    <template #operateRight>
      <ATooltip title="刷新列表">
        <AButton :icon="createVNode(ReloadOutlined)" :disabled="!!timer" @click="onRefreshData">
          {{ timer || '' }}
        </AButton>
      </ATooltip>
      <ATooltip title="导出用户">
        <RouterLink to="/system/user/export">
          <AButton :icon="createVNode(ExportOutlined)"></AButton>
        </RouterLink>
      </ATooltip>
    </template>

    <template #bodyActionCell="{ record }">
      <template v-if="record?.admin === false">
        <AButton type="link" size="small" :icon="createVNode(EditOutlined)" @click="() => onOpenEditModal(record)">
          编辑
        </AButton>
        <APopconfirm
          title="您确定删除该数据吗?"
          ok-text="是"
          cancel-text="否"
          @confirm="() => onDelete([record.userId])"
        >
          <AButton type="link" danger size="small" :icon="createVNode(DeleteOutlined)">删除</AButton>
        </APopconfirm>
      </template>
    </template>
  </UserTable>
  <AddUser :open="openAddModal" @finish="onAddUser" @cancel="() => setOpenAddModal(false)"></AddUser>
  <EditUser
    :userId="userId"
    :open="openEditModal"
    @finish="onEditUser"
    @cancel="() => setOpenEditModal(false)"
  ></EditUser>
</template>

<script setup>
import { createVNode, onBeforeMount } from 'vue';
import { AddUser, EditUser, UserTable, UserSearchFrom } from './modules';
import { PlusOutlined, EditOutlined, DeleteOutlined, ExportOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { useState, useFetchPageData } from '@/hooks';
import { fetchGetUserList, fetchAddUser, fetchUpdateUser, fetchDeleteUser } from '@/api/system/user';

const [openAddModal, setOpenAddModal] = useState(false);
const [userId, setUserId] = useState(null);
const [openEditModal, setOpenEditModal] = useState(false);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);

const {
  sourceData,
  spinning: spinning,
  pagination,
  timer,
  onFetchData,
  onSearchData,
  onPageChange,
  onResetData,
  onRefreshData
} = useFetchPageData(fetchGetUserList);

onBeforeMount(() => {
  onFetchData();
});

const onOpenEditModal = (record) => {
  setUserId(record.userId);
  setOpenEditModal(true);
};

const onAddUser = async (values) => {
  await fetchAddUser(values);
  setOpenAddModal(false);
  onRefreshData(true);
};

const onEditUser = async (values) => {
  await fetchUpdateUser(values);
  setOpenEditModal(false);
  setUserId(null);
  onRefreshData(true);
};

const onDelete = async (values) => {
  await fetchDeleteUser(values);
  onRefreshData(true);
};
</script>

<style lang="scss" scoped></style>
